<template>
  <a-card size="small" :bordered="false" :hoverable="true">
    <a-form ref="formRef" layout="vertical" :model="formState" :rules="formRules" @finish="handleSubmit">
      <a-row :gutter="16">
        <a-col :xs="24" :sm="12" :lg="8">
          <a-form-item label="道路编号" name="deviceRoad">
            <a-input v-model:value="formState.deviceRoad" readonly />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="12" :lg="8">
          <a-form-item label="设备编号" name="deviceId">
            <a-input-number v-model:value="formState.deviceId" :min="1" style="width: 100%" :disabled="true" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="12" :lg="8">
          <a-form-item label="心跳间隔 (秒)" name="interval">
            <a-input-number v-model:value="formState.interval" :min="1" style="width: 100%" placeholder="请输入心跳间隔" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-space>
        <a-button type="primary" html-type="submit" :loading="submitLoading">下发指令</a-button>
        <a-button @click="resetForm" :disabled="submitLoading">重置</a-button>
      </a-space>
    </a-form>

    <a-empty v-if="!responseData" class="smart-margin-top24" description="暂无指令响应" />

    <template v-else>
      <a-divider />
      <a-descriptions title="最新响应" size="small" :column="2" bordered>
        <a-descriptions-item label="请求ID">
          <SmartCopyIcon :text="responseData.requestId" />
          <span class="smart-margin-left8">{{ responseData.requestId }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="响应状态">
          <a-tag :color="statusColor(responseData.status)">{{ responseData.status || '-' }}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="当前心跳间隔 (秒)">{{ responseData.interval || '-' }}</a-descriptions-item>
        <a-descriptions-item label="当前模式">{{ responseData.currentMode || '-' }}</a-descriptions-item>
        <a-descriptions-item label="响应消息" :span="2">{{ responseData.message || '-' }}</a-descriptions-item>
        <a-descriptions-item label="响应时间">{{ formatTimestamp(responseData.timestamp) }}</a-descriptions-item>
      </a-descriptions>
    </template>
  </a-card>
</template>

<script setup>
  import { message } from 'ant-design-vue';
  import dayjs from 'dayjs';
  import { reactive, ref } from 'vue';
  import { trafficControlApi } from '/@/api/support/traffic-control-api';
  import SmartCopyIcon from '/@/components/framework/smart-copy-icon/index.vue';
  import { MQTT_STATUS_COLOR_MAP } from '/@/constants/support/traffic-const';
  import { smartSentry } from '/@/lib/smart-sentry';

  const formRef = ref();
  const submitLoading = ref(false);
  const responseData = ref();

  const defaultForm = {
    deviceRoad: '1201100',
    deviceId: 2,
    interval: 30,
  };

  const formState = reactive({ ...defaultForm });

  const formRules = {
    deviceRoad: [{ required: true, message: '请输入道路编号' }],
    deviceId: [{ required: true, type: 'number', message: '请输入设备编号' }],
    interval: [{ required: true, type: 'number', message: '请输入心跳间隔' }],
  };

  function resetForm() {
    Object.assign(formState, { ...defaultForm });
    formRef.value?.clearValidate();
  }

  function formatTimestamp(timestamp) {
    if (!timestamp) {
      return '-';
    }
    return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss');
  }

  function statusColor(status) {
    return MQTT_STATUS_COLOR_MAP[status] || 'default';
  }

  async function handleSubmit() {
    try {
      submitLoading.value = true;
      const responseModel = await trafficControlApi.setHeartbeatInterval({ ...formState });
      responseData.value = responseModel.data;
      message.success(responseModel.msg || '指令发送成功');
    } catch (error) {
      smartSentry.captureError(error);
    } finally {
      submitLoading.value = false;
    }
  }
</script>

